<template>
	<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item v-for="(item,index) in carInfoDTO" :key="index">
			<view class="header-car" @click="onAddCar(item)">
				<image class="car" src="../../static/icon8.png" mode=""></image>
				<view class="content">
					<image :src="item.carLogoPic" class="car-icon" mode=""></image>
					<view class="">
						<text class="car-name">{{item.carNumber}}</text>
						<text class="car-desc slh">{{item.carBrand+' '+item.carSeries+' '+item.carType}}</text>
					</view>
				</view>
				<image src="../../static/edit.png" class="edit" mode=""></image>
			</view>
		</swiper-item>
		
	</swiper>
	<view class="tabs">
		<view class="" @click="bindInspection">
			<image src="../../static/icon1.png" mode=""></image>
			<text>年检代办</text>
		</view>
		<view class="" @click="bindMaintain">
			<image src="../../static/icon2.png" mode=""></image>
			<text>品牌保养</text>
		</view>
		<view class="" @click="bindCarWash">
			<image src="../../static/icon3.png" mode=""></image>
			<text>特惠洗车</text>
		</view>
		<view class="" @click="bindProxySriving">
			<image src="../../static/icon4.png" mode=""></image>
			<text>代驾服务</text>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive
	} from 'vue';
	import {
		carInfoList
	}from '@/api'
	import {wxOpenid,checkLogin} from '@/utils/login-sdk.js'
	
	
	
	
	const carInfoDTO = ref()

	onShow(()=>{
		getData()
	})
	
	/** 获取首页数据*/
	const getData = async()=>{
		const {memberId} = await wxOpenid()
		const res = await carInfoList({memberId})
		
		carInfoDTO.value = res.result
	}
	/** 修改车辆信息 */
	const onAddCar = (item)=>{
		uni.navigateTo({
			url:'/pages/addCar/addCar?carId='+item.carInfoId
		})
	}
	/** 年检 */
	const bindInspection = () => {
		
		checkLogin(()=>{
			uni.navigateTo({
				url: "/pages/inspection/inspection"
			})
		})
		
	}
	/** 代驾 */
	const bindProxySriving = () => {
		checkLogin(()=>{
			uni.navigateTo({
				url: "/pages/proxyDriving/proxyDriving"
			})
		})
		
	}
	/** 品牌保养 */
	const bindMaintain = () => {
		checkLogin(()=>{
			uni.navigateTo({
				url: "/pages/maintain/maintain"
			})
		})
		
	}
	/** 特惠洗车 */
	const bindCarWash = () => {
		checkLogin(()=>{
			uni.navigateTo({
				url: "/pages/carWash/carWash"
			})
		})
		
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #FE9B23 0%, #FFB32B, #FFFFFF 49%) no-repeat;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}
	.header-car{
		
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 1px solid #F5F5F5;
		margin: 49rpx auto;
		width: 702rpx;
		position: relative;
		.edit{
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			width: 40rpx;
			height: 40rpx;
		}
		.content{
			position: relative;
			width: 640rpx;
			height: 213rpx;
			display: flex;
			align-items: center;
			padding: 0 31rpx;
		}
		.car-icon{
			display: block;
			width: 118rpx;
			height: 118rpx;
		}
		view{
			margin-left: 15rpx;
			.car-name{
				font-weight: bold;
				font-size: 40rpx;
				color: #222222;
			}
			.car-desc{
				// display: block;
				font-size: 24rpx;
				color: #5F5F5F;
				width: 475rpx;
			}
		}
		
		.car {
			position: absolute;
			width: 702rpx;
			height: 213rpx;
			right: 0;
			bottom: 0;
			
		}
	}
	.tabs {
		width: 640rpx;
		margin: 86rpx auto;
		display: flex;
		justify-content: space-between;
	
		view {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
	
			image {
				display: block;
				width: 82rpx;
				height: 82rpx;
				margin-bottom: 8rpx;
			}
	
			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #16191B;
	
			}
		}
	}
	
</style>
